<template>
    <!-- ok -->
    <!-- <view class="wanlpage-menu grid text-center" 
		:class="'col-' + pageData.params.colfive" 
		:style="[pageData.style]"
		> 
		<view class="item" 
			:style="{'margin-top':pageData.params.menuMarginTop}" 
			v-for="(menu, keys) in pageData.data" 
			:key="keys"
			@tap="onLink(menu.link)">
			<view v-if="pageData.params.menuType === 'icon'" class="picicon" 
			:class="menu.bgClass" 
			:style="{
				'height':pageData.params.menuHeightWidth,
				'width':pageData.params.menuHeightWidth,
				'margin-bottom':pageData.params.menuMarginBottom,
				'border-radius':pageData.params.menuBorderRadius
			}">
				<text 
					:class="[menu.icon,menu.iconClass]" 
					:style="{'font-size':pageData.params.menuIconSize}"></text>
			</view>
			
			<view v-else class="picicon"
			:class="menu.bgClass" 
			:style="{
				'margin-bottom':pageData.params.menuMarginBottom
			}">
				<image :src="$wanlshop.oss(menu.iconImage, 100, 0, 1, 'transparent', 'png')" :style="{
					'height':pageData.params.menuHeightWidth,
					'width':pageData.params.menuHeightWidth,
					'border-radius':pageData.params.menuBorderRadius
				}" mode="heightFix"></image>
			</view>
			<view :style="{'font-size':pageData.params.menuTextSize}">
				{{menu.text}}
			</view>
		</view>
	</view> -->
    <view style="background-color: #f7f7f7" v-if="imageUrl">
        <view class="box">
            <!-- 滚动时触发 -->
            <view style="background-color: #fff">
                <uv-scroll-list ref="menu" indicatorActiveColor="#E50000">
                    <view class="item1" v-for="(menuItem, keys) in menu" :key="keys">
                        <view class="inner" @tap="onLinkMenu(keys)">
                            <image class="icon" style="width: 86rpx; height: 86rpx" :src="imgUrl + menuItem.image"
                                mode="scaleToFill" />
                            <text class="text">{{ menuItem.name }}</text>
                        </view>
                    </view>
                </uv-scroll-list>
            </view>
        </view>
        <view class="content flex just-around">
            <view class="card item" @click="jump('/pages/product/list?is_recommend=1')">
                <view class="title f-30 flex hot">
                    推荐产品
                    <view class="hotIcon f-16"> HOT </view>
                </view>
                <view class="sub f-20"> 每天都有好物上新 </view>
                <image class="image" :src="imgUrl + indexData.recommend.image" mode="scaleToFill" />
                <view class="name f-24">
                    {{ indexData.recommend.title }}
                </view>
                <view class="price"> {{ indexData.recommend.price }}</view>
            </view>
            <view class="card item" @click="jump('/pages/product/list?is_brand=1')">
                <view class="title f-30 flex">
                    大牌推荐
                    <!-- <view v-if="item.hot" class="hotIcon f-16"> HOT </view> -->
                </view>
                <view class="sub f-20"> 大品牌值得信赖 </view>
                <image class="image" :src="imgUrl + indexData.brand.image" mode="scaleToFill" />
                <view class="name f-24">
                    {{ indexData.brand.title }}
                </view>
                <view class="price"> {{ indexData.brand.price }}</view>
            </view>
            <view class="card item" @click="jump('/pages/product/list?is_explosions=1')">
                <view class="title f-30 flex">
                    今日爆款
                    <!-- <view v-if="item.hot" class="hotIcon f-16"> HOT </view> -->
                </view>
                <view class="sub f-20"> 都在抢的爆款好物 </view>
                <image class="image" :src="imgUrl + indexData.explosions.image" mode="scaleToFill" />
                <view class="name f-24">
                    {{ indexData.explosions.title }}
                </view>
                <view class="price"> {{ indexData.explosions.price }}</view>
            </view>
        </view>

        <view class="hotActivity">
            <view class="title f-34 flex just-between" style="margin-bottom: 30rpx">
                热门活动
                <image class="icon" @click="jump('/pages/user/activities/activities')"
                    :src="imageUrl + '/static/images/new/arrow.png'" mode="scaleToFill" />
            </view>
            <swiper autoplay circular next-margin="50rpx" class="" style="height: 210rpx">
                <swiper-item v-for="(item, index) in indexData.activity" :key="index" @click="activity(item)">
                    <view class="">
                        <image class="banner" :src="item.image" mode="widthFix" />
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <view class="hotOrder">
            <view class="title f-34 flex just-between" style="margin-bottom: 30rpx">
                热销产品
                <image class="icon" @click="jump('/pages/product/list?type=goods&filterIndex=1')"
                    :src="imageUrl + '/static/images/new/arrow.png'" mode="scaleToFill" />
            </view>
            <swiper indicator-dots autoplay circular class="card"
                style="border-radius: 20rpx; height: 400rpx; padding-top: 30rpx">
                <swiper-item v-for="(item, index) in orderList" :key="index" style="display: flex">
                    <view class="" v-for="(items, index) in item" :key="index" style="
                            margin: 0 16rpx 44rpx;
                            text-align: center;
                            background-color: #f9f9f9;
                            padding: 20rpx 10rpx 0;
                            border-radius: 16rpx;
                            &:last-child {
                                margin-right: 0;
                            }
                        " @click="jump('/pages/product/goods?id=' + items.id)">
                        <image style="width: 180rpx; height: 180rpx; border-radius: 20rpx" class="image"
                            :src="imgUrl + items.image" mode="scaleToFill" />
                        <view class="name line-clamp-2 f-22" style="height: 60rpx"> {{ items.title }} </view>
                        <view class="price f-28" style="color: #e50000"> {{ items.price }} </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <view class="coupon">
            <image class="bg" :src="imageUrl + '/static/images/new/yhqbg.png'" mode="scaleToFill" />
            <view class="title">大额优惠券限时领取</view>
            <view class="items flex just-around">
                <view class="item" v-for="(item, index) in indexData.coupon" :key="index"
                    @click="jump('/pages/user/coupon/list')">
                    <image class="image" :src="imageUrl + '/static/images/new/quan.png'" mode="scaleToFill" />
                    <view class="text">
                        <view class="money f-48">
                            {{ item.price }}
                        </view>
                        <view class="limit f-20" style="margin-top: 14rpx"> 满 {{ item.limit }} 使用 </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="route flex just-between">
            <!-- 会员权益 -->
            <view class="member">
                <image class="bg" :src="imageUrl + '/static/images/new/member.png'" mode="scaleToFill" />
                <view class="text" @click="clickVip">
                    <view class="titile f-30"> 会员权益 </view>
                    <view class="sub f-22">权益多多</view>
                    <view class="btn f-20">
                        {{ "查看详情 >" }}
                    </view>
                </view>
            </view>
            <!-- 积分兑换 -->
            <view class="integral">
                <image class="bg" :src="imageUrl + '/static/images/new/integral.png'" mode="scaleToFill" />
                <view class="text" @click="jump('/pages/user/member/integral')">
                    <view class="titile f-30"> 积分兑换 </view>
                    <view class="sub f-22">兑换商品</view>
                    <view class="btn f-20">
                        {{ "查看详情 >" }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "WanlPageMenu",
    props: {
        pageData: {
            type: Object,
            default: function () {
                return {
                    name: "菜单组件",
                    type: "menu",
                    params: [],
                    style: [],
                    data: [],
                };
            },
        },
        menu: Array,
        indexData: {
            type: Object,
            default: {},
        },
        orderList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            imageUrl: this.$imageUrl || "",
            imgUrl: this.$imgUrl,
            leftX: "0%",
            widths: 0,
            lineWidth: 0,
        };
    },
    mounted() { },
    // 1.0.2升级
    methods: {
        //点击会员权益
        clickVip() {
            // let login = uni.getStorageSync("login"),
            //     userinfo = uni.getStorageSync("userinfo");
            // if (login == true) {
            // if (userinfo.is_vip == 1) {
            uni.navigateTo({
                url: "/pages/user/member/membership?id=" + this.indexData.vip_id + "&memberEquity=0",
            });
            // } else if (userinfo.is_vip == 0) {
            //     uni.navigateTo({
            //         url: "/pages/product/list",
            //     });
            // }
            // } else {
            //     uni.navigateTo({
            //         url: "/pages/login/login",
            //     });
            // }
        },

        // 热门推荐
        activity(item) {
            if (item.jump_type == "shop") {
                console.log("进入商家店铺");
                uni.navigateTo({
                    url: `/pages/shop/index?id=${item.jump_id}`,
                });
            } else if (item.jump_type == "goods") {
                console.log("进入正常商品详情");
                uni.navigateTo({ url: "/pages/product/goods?id=" + item.jump_id });
            } else if (item.jump_type == "score") {
                console.log("进入积分详情");
                uni.navigateTo({ url: "/pages/user/member/details?id=" + item.jump_id });
            } else if (item.jump_type == "groups") {
                console.log("进入拼团详情");
                uni.navigateTo({ url: "/pages/apps/groups/goods?id=" + item.jump_id });
            }
        },
        onLinkMenu(index) {
            this.$wanlshop.to("/pages/page/classify?status=" + index);
        },
        async onLink(url) {
            this.$wanlshop.on(url);
        },
        // 获取标签宽度
        getWidth() {
            const query = uni.createSelectorQuery().in(this);
            query.select(".item").boundingClientRect();
            query.exec((res) => {
                this.widths = res[0].width * this.menu.length - res[0].width * 5;
            });
            query.select(".lines").boundingClientRect();
            query.exec((res) => {
				if (res[1] === null) {
					this.lineWidth = 0 + "px";
				} else {
					this.lineWidth = res[1].width + "px";
				}
            });
        },
        scroll(e) {
            (this.leftX = (e.detail.scrollLeft / this.widths) * 100) > 60
                ? (this.leftX = "70")
                : (this.leftX = this.leftX);
        },
        //跳转
        jump(url) {
            this.$wanlshop.to(url);
        },
    },
    mounted() {
        setTimeout(() => {
            // console.log(this.menu);
            this.getWidth();
        }, 500);
    },
};
</script>
<style lang="scss" scoped>
.wanlpage-menu .picicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.box {
    border-radius: 20rpx;
    padding: 20rpx;
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.container1 {
    background: white;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 20rpx 0;
    border-radius: 20rpx;
    // #ifdef MP-WEIXIN
    white-space: nowrap;
    // #endif
}

/deep/.uni-scroll-view-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 20rpx 0;
    border-radius: 20rpx;
}

.item1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 20%;
    max-width: 20%;
    // #ifdef MP-WEIXIN
    display: inline-block;

    // #endif
    .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
    }

    .icon {
        margin-bottom: 6rpx;
    }
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 20%;

    .icon {
        margin-bottom: 6rpx;
    }
}

.line {
    width: 60rpx;
    height: 10rpx;
    background: #c0c0c0;
    border-radius: 5rpx;
    position: absolute;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;

    .lines {
        height: 10rpx;
        background: #c9151e;
        border-radius: 5rpx;
        position: absolute;
    }
}

.content {
    padding: 10rpx;
    box-sizing: border-box;

    .item {
        width: 220rpx;
        min-height: 400rpx;
        padding: 20rpx !important;

        .title {
            color: #333;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .sub {
            color: #999;
            margin-bottom: 10rpx;
        }

        .image {
            min-width: 160rpx;
            min-height: 160rpx;
            max-width: 160rpx;
            max-height: 160rpx;
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
        }

        .name {
            word-break: break-all;
            text-align: center;
            line-height: 1.4;
            // 多行省略
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #333;
            margin-bottom: 10rpx;
        }

        .price {
            text-align: center;
            color: #e50000;
            font-size: 34rpx;
        }

        .price::before {
            content: "¥";
            font-size: 22rpx;
            margin-right: 2rpx;
        }
    }
}

.hotActivity {
    padding: 20rpx;
    box-sizing: border-box;

    .title {
        font-weight: bold;
        margin-bottom: 20rpx;

        .icon {
            width: 38rpx;
            height: 38rpx;
        }
    }

    .banners,
    /deep/.uni-scroll-view-content {
        display: flex;
        flex-wrap: nowrap;
        // #ifdef MP-WEIXIN
        white-space: nowrap;

        // #endif
        .item {
            // #ifdef MP-WEIXIN
            display: inline-block;
            // #endif
            min-width: 550rpx;
            height: 190rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
            overflow: hidden;
        }

        .banner {
            width: 550rpx;
            height: 190rpx;
        }
    }
}

.hotOrder {
    padding: 20rpx;
    box-sizing: border-box;

    .title {
        font-weight: bold;
        margin-bottom: 20rpx;

        .icon {
            width: 38rpx;
            height: 38rpx;
        }
    }

    swiper {
        width: 100%;
        min-height: 300rpx;

        .swiper-item {
            width: 100%;
            min-height: 381rpx;
        }

        .item {
            width: 208rpx;
            border-radius: 20rpx;
            overflow: hidden;
            background: #f9f9f9;
            padding: 10rpx;
            box-sizing: border-box;

            .image {
                min-width: 150rpx;
                min-height: 150rpx;
                max-width: 150rpx;
                max-height: 150rpx;
                width: 150rpx;
                height: 150rpx;
                border-radius: 10rpx;
            }

            .name {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
                word-break: break-all;
                text-align: center;
                line-height: 1.4;
                // 多行省略
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .price {
                font-size: 24rpx;
                color: #e50000;
                margin-bottom: 10rpx;
            }

            .price::before {
                content: "¥";
                font-size: 22rpx;
                margin-right: 2rpx;
            }
        }
    }
}

.coupon {
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
    width: calc(100% - 40rpx);
    height: 260rpx;
    margin: 0rpx auto;

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .title {
        color: #c1170e;
        position: absolute;
        top: 20rpx;
        left: 50%;
        transform: translateX(-50%);
    }

    .items {
        position: absolute;
        top: 80rpx;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 173rpx;

        .item {
            width: 171rpx;
            height: 173rpx;
            position: relative;

            .image {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            .text {
                width: 100%;
                position: absolute;
                top: 0rpx;
                text-align: center;
                left: 50%;
                transform: translateX(-50%);
                color: #fff;

                .money {
                    color: #e50000;
                }

                .money::before {
                    content: "¥";
                    font-size: 22rpx;
                    margin-right: 2rpx;
                }

                .limit {
                    word-break: break-all;
                    color: #fbe5c8;
                    margin-top: 10rpx;
                }
            }
        }
    }
}

.route {
    padding: 20rpx;
    box-sizing: border-box;
    width: 100%;

    .member,
    .integral {
        position: relative;
        width: 49%;
        height: 180rpx;

        .bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .text {
            position: absolute;
            top: 10%;
            left: 30rpx;

            .titile {
                font-size: 34rpx;
                color: #000;
                font-weight: bold;
            }

            .sub {
                font-size: 24rpx;
                color: #ea321b;
            }

            .btn {
                margin-top: 20rpx;
                width: 120rpx;
                height: 36rpx;
                line-height: 16rpx;
                border-radius: 20rpx;
                padding: 10rpx;
                text-align: center;
                color: #ffe5d4;
                background: #fa301b;
            }
        }
    }
}

.hot {
    color: #d24637 !important;
}

.hotIcon {
    width: 46rpx;
    height: 29rpx;
    background: linear-gradient(90deg, #d14838 0%, #ff5b48 100%);
    color: white;
    border-radius: 15rpx 0rpx 15rpx 0rpx;
    text-align: center;
    line-height: 29rpx;
    margin-left: 10rpx;
}

/deep/.uni-swiper-dot-active {
    width: 30rpx !important;
    height: 10rpx;
    border-radius: 5rpx;
    background: #e50000 !important;
}

/deep/.uni-swiper-dot {
    width: 20rpx;
    height: 10rpx;
    border-radius: 5rpx;
    background: #c0c0c0;
}

.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

swiper {

    //指示点位置，支持h5、app
    & /deep/ .uni-swiper-dots-horizontal {
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
    }

    //指示点位置，支持微信小程序
    & /deep/ .wx-swiper-dots-horizontal {
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
    }
}

/deep/.uni-scroll-view-content {
    justify-content: space-between;
    padding: 0;
}

/deep/.uv-scroll-list__indicator {
    margin-top: 10rpx;
}
</style>
